/**
 * @description 非标债券投资要求
 * @author zls
 */
import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { message, Tooltip } from 'antd';
import { IconC, InputNumberC } from '@/src/comps';
import myStyle from './style.less';
import accounting from 'accounting';
@Form.create()
class cards extends PureComponent {
  constructor() {
    super();
    this.state = {
      data: [],
      showInput: false,
      value: null,
    };
  }
  componentDidMount() {
    if (this.props.value)
      this.setState({
        value: this.props.value,
      });
  }
  UNSAFE_componentWillReceiveProps(nextPorps) {
    if (nextPorps.value != this.props.value) {
      this.setState({
        value: nextPorps.value,
      });
    }
  }
  onClick = () => {
    if (this.state.value == null) {
      message.info(`不能为空`);
      return;
    }
    this.setState({ showInput: false });
    this.props.onSave(this.state.value);
  };
  onChange = (e) => {
    this.setState({ value: e });
  };
  RMBEdit = () => {
    this.setState({
      showInput: true,
      value: this.props.value,
    });
  };
  render() {
    const { value, title, helper = '', max, isEdit = false, unit = '', precision } = this.props;

    return (
      <div className={myStyle.centerBox}>
        {/* 左边 */}
        <div className={myStyle.leftContent}>
          <div className={myStyle.topPart}>
            <span className={myStyle.normalFont}>
              {title}
              {/* &nbsp;
                            <Tooltip title={helper}>
                                <Icon type="question-circle-o" />
                            </Tooltip> */}
            </span>
          </div>
          {this.state.showInput ? (
            // 编辑状态 style={{ width: '200px', display: 'inline-block', verticalAlign: 'middle' }}
            <div className={myStyle.bottomPart} style={{ display: 'flex', alignItems: 'center' }}>
              <div>
                <InputNumberC
                  form={this.props.form}
                  dataIndex='number'
                  splitStyle={true}
                  unit={unit}
                  precision={precision}
                  max={max}
                  initialValue={value}
                  onChange={this.onChange}
                />
              </div>
              <a
                style={{ marginLeft: '12px', whiteSpace: 'nowrap' }}
                onClick={() => {
                  this.onClick();
                }}
              >
                保存
              </a>
              <a style={{ marginLeft: '12px', whiteSpace: 'nowrap' }} onClick={() => this.setState({ showInput: false })}>
                取消
              </a>
            </div>
          ) : (
            // 非编辑状态
            <div className={myStyle.bottomPart}>
              <span className={myStyle.bigFont}>{`${value != null ? accounting.formatNumber(Number(value), precision) : '--'}${unit}`}</span>
              {isEdit && <IconC isHover={false} type={'edit'} style={{ margin: '0 0 0 8px' }} onClick={() => this.RMBEdit()} />}
            </div>
          )}
        </div>
        {/* 右边 */}
        <div className={myStyle.rightContent}>
          <IconC type={'money'} style={{ margin: '20px 0 0 40px', width: '40px', height: '40px' }} />
        </div>
      </div>
    );
  }
}
export default cards;

// <div style={{ backgroundImage: `url(${bgurl})`, textAlign: 'center', height: '60px', lineHeight: '60px' }}>
// <span style={{ marginRight: '20px', verticalAlign: 'middle' }}>{name}</span>
// {
//     this.state.showInput ? <> <div style={{ width: '200px', display: 'inline-block', verticalAlign: 'middle' }}>
//         <InputNumberC
//             form={this.props.form}
//             dataIndex='number'
//             splitStyle={true}
//             unit={'元'}
//             precision={2}
//             initialValue={content}
//             onChange={this.onChange}
//         />
//     </div>
//         <a  style={{ marginLeft: '20px' }} onClick={() => { this.onClick() }}>保存</a>
//         <a  style={{ marginLeft: '20px' }} onClick={() => this.setState({ showInput: false })}>取消</a>
//     </> :
//         <>
//             <span style={{ fontWeight: 500, fontSize: '18px', verticalAlign: 'middle' }}>
//                 {this.getContent(content, unit)}{unit}
//             </span>
//             {isEdit && <IconC type='edit' style={{ marginLeft: '12px' }} onClick={() => {
//                 this.setState({ value: content })
//                 this.setState({ showInput: true })
//             }}></IconC>}</>
// }
// </div>
